<template>
  <a-card :bordered="false">
    <a-steps class="steps" :current="currentTab">
      <a-step title="填写报名信息" />
      <a-step title="缴费" />
      <a-step title="完成" />
    </a-steps>
    <div class="content">
      <step1 ref="step1" v-show="currentTab === 0" @nextStep="nextStep"/>
      <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
      <step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish" @print="print"/>
    </div>
    <div style="display: none">
      <print-word ref="print" :print-data="data"></print-word>
    </div>
  </a-card>
</template>

<script>
import Step1 from './steps/Step1'
import Step2 from './steps/Step2'
import Step3 from './steps/Step3'
import PrintWord from '@/components/PrintWord'

export default {
  name: 'StepForm',
  components: {
    Step1,
    Step2,
    Step3,
    PrintWord
  },
  data () {
    return {
      currentTab: 0,
      data: {},
      printVisible: false
    }
  },
  methods: {
    // handler
    nextStep (res) {
      if (res) {
        this.data = res
        this.printVisible = true
      }
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
    },
    prevStep () {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    finish () {
      this.currentTab = 0
    },
    print () {
      console.log(this.data)
      this.$refs.print.print()
      // const signUp = document.querySelector('.sign-up')
      // const html = "<html><head><meta charset='utf-8' /></head><body>" + signUp.outerHTML + '</body></html>'
      // console.log(html)
      // const download = document.createElement('a')
      // download.style.display = 'none'
      // download.download = 'test.doc'
      // const blob = new Blob([html], { type: 'application/vnd.ms-word' })
      // const dataUrl = URL.createObjectURL(blob)
      // download.href = dataUrl
      // document.body.appendChild(download)
      // download.click()
      // URL.revokeObjectURL(dataUrl)
      // document.body.removeChild(download)
    }
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
  .content{
    max-width: 750px;
    margin: 16px auto;
  }
</style>
